<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="https://cdn.socket.io/4.6.1/socket.io.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
    <style>
    body { font-family: Arial, sans-serif; margin: 20px; }
    .container { display: flex; flex-wrap: wrap; gap: 20px; }
    .chart-container { width: 48%; height: 400px; }
  </style>
</head>
<body>

  <div class="container">
    <!-- 图表 1: 累计展示所有男女人数各自的总和 -->
    <div class="chart-container" id="gender-total-chart"></div>
  </div>
  <script>
    const socket = io('http://localhost:5000');

    // 全局累计数据
    const cumulativeData = {
      genderTotal: { male: 0, female: 0, total: 0 },
    };

    // 初始化 ECharts 图表实例
    const genderTotalChart = echarts.init(document.getElementById('gender-total-chart'));

        // 图表配置
    const genderTotalChartOption = {
      title: { text: '累计所有男女人数总和', left: 'center' },
      tooltip: { trigger: 'item' },
      series: [
        {
          name: '人数',
          type: 'pie',
          radius: '50%',
          data: []
        }
      ]
    };
    genderTotalChart.setOption(genderTotalChartOption);

        // 累计数据处理函数
    socket.on('kafka-message', (message) => {
        const parsedMessage = JSON.parse(message.data);
        const introduction = parsedMessage.introduction;
        const result = parsedMessage.result;

        if (introduction.includes('统计所有男女人数各自的总和')) {
            const match = result.match(/Male: (\d+\.?\d*), Female: (\d+\.?\d*), Total: (\d+\.?\d*)/);
            if (match) {
                cumulativeData.genderTotal.male += parseFloat(match[1]);
                cumulativeData.genderTotal.female += parseFloat(match[2]);
                cumulativeData.genderTotal.total += parseFloat(match[3]);

                genderTotalChartOption.series[0].data = [
                    {name: '男', value: cumulativeData.genderTotal.male},
                    {name: '女', value: cumulativeData.genderTotal.female}
                ];
                genderTotalChart.setOption(genderTotalChartOption);
            }
        }
    });
      </script>
</body>
</html>